<template>
  <div id="test_app">
    <!--echarts的容器-->
    <!-- 放图表 -->
    <div class="echarts" ref="aux" style="width: 100%;height: 400px;background:#fff"></div>
  </div>
</template>
     
    <script>
import { Devicehistory } from "../../../request/api";

export default {
  name: "",
  data() {
    return {
      charts: "",
      allData: [], //后端数据
      opinionData: ["155", "400", "900", "800", "300", "900", "270"] //数据
    };
  },
  methods: {
    drawLine() {
      this.charts = this.$echarts.init(this.$refs.aux, "dark");

      let initOptions = {
        title: {
          left: "3%",
          top: "5%",
          text: "设备每日耗电量展示" //标题文本，支持使用 \n 换行。
        },
        // 提示
        tooltip: {
          show: true,
          trigger: "axis",
          axisPoint: {
            type: "shadow"
          }
        },
        // tooltip: {
        //   trigger: "axis"
        // },
        legend: {
          align: "right", //文字在前图标在后
          left: "3%",
          top: "15%",
          data: ["耗电量"]
        },
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true
        },

        toolbox: {
          show: true,
          feature: {
            // saveAsImage: {} ,//保存为图片
            magicType: { type: ["line", "bar"] } //此处最新版本echarts可设置三个值（stack-堆叠模式
          }
        },

        // x轴
        xAxis: {
          name: "日期",
          type: "category",
          boundaryGap: true,
          boundaryGap: ["0", "0.5"],
          axisTick: {
            alignWithLabel: true //保证刻度线和标签对齐
          },
          data: [] //x坐标
        },
        // y轴
        yAxis: {
          type: "value",
          boundaryGap: true,
          boundaryGap: ["0", "0.5"]
          // splitNumber: 5, //纵坐标数
          // interval: 2000 //强制设置坐标轴分割间隔
        },

        series: [
          {
            name: "耗电量",
            type: "bar", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            data: this.opinionData
          }
        ]
      };
      // 绘制基础图表
      this.charts.setOption(initOptions);
    },
    getData(num) {
      let obj = { timeLength: 0 };
      if (num) {
        obj.timeLength = num;
      } else {
        obj.timeLength = 7;
      }
      Devicehistory(obj).then(d => {
        this.allData = d.data;
        //根据业务继续完善图表
        this.setEcharts();
        // console.log(d, "d");
      });
    },
    // 根据业务完善图表
    setEcharts() {
      // 1.组装类目数据和系列数据
      // reverse()：对数组进行倒序
      let cateData = this.allData.powerConsumption.map(item => item.logTime);
      cateData = cateData.reverse();
      //   console.log(cateData);
      let serData = this.allData.powerConsumption.map(item =>
        Number(item.logValue).toFixed(2)
      );
      serData = serData.reverse();
      
      //  设置图标绘制项
      let setOptions = {
        xAxis: {
          data: cateData
        },
        // 图表类型
        series: [
          {
            data: serData
          }
        ]
      };
      // setOption 合并多次的绘图配置项 完善图表
      this.charts.setOption(setOptions);
    },
    // 窗口适配方法
    adapTive() {
      // 图标适配
      this.charts.resize();
    }
  },
  //调用
  mounted() {
    // 获取数据
    this.getData();

    this.drawLine();
    //监听窗口变化实现图表自适应
    window.addEventListener("resize", this.adapTive);
    //调用适配方法
    this.adapTive();
  }
};
</script>
     
    <style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>